<template>
    <div class="waitingFlash">
        <div class="narBar">
            <div v-if="statusBar == 'true'" class="statusBar" ></div> 
            <div v-if="navigator == 'true'" class="navigator">
                <!-- <img src="../../assets/img/common/leftB.png" @click="goBack()"> -->
            </div> 
        </div>
        <div class="progressDiv">
            <p class="progressP">
                <span class="progress-tip">
                    {{ progressTip }}  
                </span>
                <span class="progress-value"> 
                    {{ progress }}%
                </span>
            </p>
            <van-progress
                :percentage="progress"
                pivot-text=""
                pivot-color="#0340F1"
                stroke-width="8"
                color="#0340F1"
            />
        </div>
        <div class="centerView">
            <img class="waitingImg" src="../../assets/img/common/reportSearch.gif" alt="">
            <p>当日首次查询耗时稍长，正在努力为您获取最新数据，请耐心等待</p>
        </div>
    </div>
</template>
<script lang="ts" setup name="waitingFlash">
import { onMounted, onUnmounted, watch,ref} from "vue"
const emits = defineEmits(['goBack'])
const statusBar = ref('')
const navigator = ref('')
const props = defineProps({
    progressTip: {
        type: String,
        default:""
    },
    flashing: {
        type:Boolean,
        default: true
    }
})
const progress = ref(21)
let timer1:any= null
let timer2:any = null
let timer3:any = null
const beginProgress = () => {
    timer1 = setInterval(() => {if(progress.value < 80)progress.value += 3} , 300)
    timer2 = setInterval(() => {if(progress.value < 90)progress.value += 1} , 800)
    timer3 = setInterval(() => {if(progress.value < 98)progress.value += 1} , 1100)  
}
const endProgress = () => {
    progress.value = 100
    if(timer1) clearInterval(timer1) 
    if(timer2) clearInterval(timer2) 
    if(timer3) clearInterval(timer3) 
    timer1 = null
    timer2 = null
    timer3 = null   
}
watch(() => props.flashing, (newValue) => {
    if(newValue) {
        beginProgress()
    }else {
        endProgress()
    }
}, { immediate: true })

// const goBack = () => {
//     emits('goBack')
// }

onMounted(async() => {
    statusBar.value = 'true' 
    navigator.value = 'true'
    // statusBar.value = localStorage.getItem("statusBar") 
    // navigator.value = localStorage.getItem("navigator")
   
})
onUnmounted(() => {
    endProgress()
})
</script>

<style lang="less" scoped>
.waitingFlash {
  width: 100vw;
  height: 100vh;
  background: white;
  font-family: PingFangSC-Regular, PingFang SC;
  font-size: 14px;
  color: #333333;
  line-height: 20px;
  .narBar {
    width: 100%;
    .statusBar {
        width: 100%;
        height: 44px;
    }
    .navigator {
        overflow: hidden;
        padding: 0 15px;
        text-align: center;
        width: 100%;
        height: 44px;
        font-size: 16px;
        color: #fff;
        line-height:  44px;
        img {
            float: left;
            width: 16px;
            height: 19px;
            margin-top: 14px;
        }
      
       
    }
}
  .progressDiv{
      width: 100%;
      padding:20px 30px 18px 30px;
      box-sizing: border-box;
      .progressP {
          width: 100%;
          display: flex;
          margin-bottom: 10px;    
          justify-content: space-between;
      }
  }
  .centerView {
      width: 100%;
      text-align: center;
      padding:30px 35px 30px 35px;
      box-sizing: border-box;
      .waitingImg {
          width: 80%;
        //   margin-bottom: 20px;
        margin:  0 auto 20px;
      }
  }
}
</style>